<!--
 * @Author: your name
 * @Date: 2021-02-21 14:07:27
 * @LastEditTime: 2021-02-21 15:48:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\computergasses\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
	<div class="banner relative text_c s12">
		<img src="@/assets/image/bluelightblocking/Bluelightblocking_1.png" alt="" class="bannerloading" id="bannerImg">
		<div class="absolute banner_txt none text_l article">
			<p class="size36 b mb10 banner_txt_one">{{$t("Protect Your eyes")}}</p>
			<p class="size36 b mb30 banner_txt_two">{{$t("from Blue Light")}}</p>
			<p class="size20 mb10 banner_txt_three">{{$t("When using phones, tablets and computers,")}}</p>
			<p class="size20 banner_txt_four">{{$t("blue light glasses help to protect your eyes all day, indoors and out.")}}</p>
		</div>
	</div>
	<div class="productDesc pt40 pb30 mb60">
		<p class="size24 b text_c mb10">{{$t("Choose a Blue light lenses starting at $19.9.")}}</p>
		<p class="size16 text_c mb20">{{$t('Pick a frame, then choose blue light lenses when selecting lenses.')}}</p>
		<div class="text_c"><a href="/eyeglasses?category=10&/" class="size16 b pointer">{{$t("Shop now")}}</a></div>
	</div>
	<div class="productImg mb170">
		<h3 class="size24 b mb30 d-block text_c">{{$t("Blue blocking lenses color type")}}</h3>
		<div class="productImg_box flex jc-center">
			<div class="productImg_left plr40">
				<img src="@/assets/image/bluelightblocking/Bluelightblocking_3.png" alt="" class="mb30">
				<h5 class="size16 mb10 b">{{$t("Tinted lenses")}}</h5>
				<p class="size16 mb10">{{$t("Apply to fashion non prescription")}}</p>
				<p class="size16 mb10">{{$t("for playing games, outdoors, watching TV and computers.")}}</p>
			</div>
			<div class="productImg_right plr40">
				<img src="@/assets/image/bluelightblocking/Bluelightblocking_2.png" alt="" class="mb30">
				<h5 class="size16 mb10 b">{{$t("Tinted lenses")}}</h5>
				<p class="size16 mb10">{{$t("Apply to fashion non prescription")}}</p>
				<p class="size16 mb10">{{$t("for playing games, outdoors, watching TV and computers.")}}</p>
			</div>
		</div>
	</div>
	<div class="productOrder">
		<h2 class="size24 b mb40 text_c">{{$t("How to buy blue light blocking glasses")}}</h2>
		<ul class="productOrder_ul p15">
			<li class="li">
				<div class="li_img">
					<img class="" src="@/assets/image/bluelightblocking/Bluelightblocking_4.png" alt="">
				</div>
				<div class="size16 text_c ptb10">{{$t("Find a frame you like")}}</div>
			</li>
			<li class="li">
				<div class="li_img">
					<img class="" src="@/assets/image/bluelightblocking/Bluelightblocking_5.png" alt="">
				</div>
				<div class="size16 text_c ptb10">{{$t("Choose prescription type")}}</div>
			</li>
			<li class="li">
				<div class="li_img">
					<img class="" src="@/assets/image/bluelightblocking/Bluelightblocking_6.png" alt="">
				</div>
				<div class="size16 text_c ptb10">{{$t("Choose blue light lenses")}}</div>
			</li>
			<li class="li">
				<div class="li_img">
					<img class="" src="@/assets/image/bluelightblocking/Bluelightblocking_7.png" alt="">
				</div>
				<div class="size16 text_c ptb10">{{$t("Proceed to checkout Easy")}}</div>
			</li>
		</ul>
	</div>
  </div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
export default {
    async asyncData({ req, params, query, route, store }) {
        // 获取路由层级
        let arr = ['computer-glasses']
        return {
            breadcrumbTtem: arr || []
        }
    },
    components: {
        BreadCrumb
    }
}
</script>

<style lang="scss" scoped>
    .banner {
        height: auto;
    }
    .banner_txt {
        left: 0;
        top: calc(50% - 90px);
    }
    .productDesc {
        background: #f4fcfc;
        border: 1px solid #eee;
    }
    .productOrder_ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .productOrder_ul .li {
        width: 25%;
    }
    .productOrder_ul .li_img {
        position: relative;
        width: 110px;
        margin: 0 auto;
    }
    .help_line .title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }
    .help_line .txt {
        width: 80%;
        margin: 0 auto;
        text-align: center;
        line-height: 1.5;
        color: #666;
    }
</style>